<template>
	<view>
		<view class="above" style="display: flex; justify-content: space-between;">
			<view class="left" style="display: flex;">
				<u--image :src="comment.avatarUrl" width="45rpx" height="45rpx" shape="circle"
				></u--image>
				<view style="height: 45rpx; line-height: 45rpx; margin-left: 15rpx; display: flex;">
					<view>
						<u-text :text="comment.nickName" size="11" color="#496c53"></u-text>
					</view>
					<view>
						<u-text v-if="comment.replyNickName != null" :text="'@' + comment.replyNickName" size="11" color="#564cbd"></u-text>
					</view>
				</view>
			</view>
			<view class="right">
				<u--image src="/static/more.png"  width="25rpx" height="25rpx"></u--image>
				<!-- <u--text prefixIcon="thumb-up" :text="10" size="11"></u--text> -->
				<!-- <text style="color: #babbca; font-size: 0.75rem; font-weight: 300;">人喜欢</text> -->
			</view>
		</view>
		<view class="content" style="padding-left: 63rpx;">
			<view>
				<u-parse :content="comment.content"></u-parse>
			</view>
			<view class="imgContent">
				<view v-for="(item, index) in comment.imgList" style="margin-right: 6rpx;" @click.stop="imgPreview(item)">
					<u--image :showLoading="true" :src="item" 
						width="180rpx" height="130rpx" mode="widthFix" radius="10">
					</u--image>
				</view>
			</view>
		</view>
		<view class="below" style="padding-left: 63rpx; margin-top: 8rpx;">
			<u--text type="info" :text="comment.timeShow" size="11" ></u--text>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 图片大图
			imgPreview(current){
				uni.previewImage({
					current: current,
					indicator:"number",
					loop:true,
					urls: this.comment.imgList
				})
			},
		},
		props: {
			comment: {
				id: '',
				content: '',
				nickName: '',
				avatarUrl: '',
				timeShow: '',
				likeNum: 0,
				imgList: []
			}
		}
	}
	
</script>

<style scoped>
	
	.content u-parse {
		font-size: 0.7rem !important;
		color: #505050 !important;
	}
	
	.imgContent {
		display: flex;
		flex-wrap: wrap;
	}
	
</style>